<template>
  <div>
    <el-header><PersonHeader></PersonHeader></el-header>
    <el-divider></el-divider>
    <el-container class="myCcontainer">
      <el-aside style="width: 300px;height: 100%">
        <PersonPhoto></PersonPhoto>
        <PersonMenu></PersonMenu>
      </el-aside>
      <el-main>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="1">
            <template slot="title">
              <h2>编辑职位</h2>
            </template>

            <el-form ref="form" :model="jobInfo" style="margin: 20px 0px;width: 800px" label-width="140px" size="mini">
              <el-form-item label="职位名称">
                <el-input v-model="jobInfo.jobName"  placeholder="请输入"  style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="发布日期">
<!--                <el-input v-model="jobInfo.pubDate" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-date-picker
                    v-model="jobInfo.pubDate"
                    type="date"
                    placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="有效截止日期">
<!--                <el-input v-model="jobInfo.endDate" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-date-picker
                    v-model="jobInfo.endDate"
                    type="date"
                    placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="月薪">
<!--                <el-input v-model="jobInfo.salary" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.salary" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.tre"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="经验">
<!--                <el-input v-model="jobInfo.experience" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.experience" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.wor"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学历">
<!--                <el-input v-model="jobInfo.education" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.education" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.edu"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="性质：">
<!--                <el-input v-model="jobInfo.nature" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.nature" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.nat"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="招聘人数">
<!--                <el-input v-model="jobInfo.recruits" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.recruits" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.peo"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄">
<!--                 <el-input v-model="jobInfo.age" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.age" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.age"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
            </el-form-item>
              <el-form-item label="到岗时间">
<!--                <el-input v-model="jobInfo.arrivalTime" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-select v-model="jobInfo.arrivalTime" placeholder="请选择" style="width: 70%">
                  <el-option
                      v-for="item in dict.arr"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市地址">
                <el-input v-model="jobInfo.cityAddr" placeholder="请输入"  style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="职位描述">
                <el-input v-model="jobInfo.jobContext" placeholder="请输入"  style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="福利标签">
                <el-input v-model="jobInfo.jobTags" placeholder="请输入"  style="width: 500px;"></el-input>
              </el-form-item>
              <el-form-item label="刷新时间">
<!--                <el-input v-model="jobInfo.refreshTime" placeholder="请输入"  style="width: 500px;"></el-input>-->
                <el-date-picker
                    v-model="jobInfo.refreshTime"
                    type="date"
                    placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item size="large">
                <el-button type="submit" style="width: 300px;background-color: #dcdfe6" @click="save">保存</el-button>
              </el-form-item>
            </el-form>




          </el-collapse-item>


        </el-collapse>
      </el-main>
    </el-container>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import Personinfo from "../Personinfo";
import PersonHeader from "./components/PersonHeader";
import PersonMenu from "./components/PersonMenu";
import PersonPhoto from "./components/PersonPhoto";
import {getEnterprise} from "../../assets/util";
import {GetEnterprise} from "../../api/user";
import {ListDict} from "../../api/dict";
import {AddJob,JobList,JobDetail} from  "../../api/JobMgr";

export default {
  name: "ModifyJobInfo",
  components: {PersonPhoto, PersonMenu, PersonHeader, footerx,Personinfo},
  data (){
    return {
      enterprise: {
        logo:this.getImage()
      },
      jobInfo:{
        jobName:'',
        pubDate:'',
        endDate:'',
        salary:'',
        experience:'',
        education:'',
        nature:'',
        recruits:'',
        age:'',
        arrivalTime:'',
        cityAddr:'',
        jobContext:'',
        jobTags:'',
        refreshTime:'',
        userId:-1,
      },
      dict:{
        nat:[],
        ind:[],
        sca:[],
        tre:[],
        edu:[],
        wel:[],
        age:[],
        peo:[],
        arr:[],
        wor:[]
      },
      activeNames: ['1','2','3'],
      salaryScope:[
        {label:'全部',clazz:'selected'},
        {label:'招聘中',clazz:'unSelected'},
        {label:'已暂停',clazz:'unSelected'},
        {label:'已过期',clazz:'unSelected'}
      ]
    }
  },
  methods:{
    handleOpen(key, keyPath){
      console.log(key, keyPath);
    },
    handleClose(key, keyPath){
      console.log(key, keyPath);
    },
    getImage(){
      return getEnterprise().logo;
    },
    handleChange(val) {
      console.log(val);
    },
    onQuery(){

    },
    save(){
      let enterprise = getEnterprise() ;
      this.jobInfo.userId = enterprise.userId;
      AddJob.r(this.jobInfo).then(d=>{
          alert(d);
      });
    },
    selectItem(objects,index){
      objects.forEach(e=>{
        e.clazz = 'unSelected';
      });
      if(objects[index].label != '不限'){
        objects[index].clazz = (objects[index].clazz == 'selected')?'unSelected':'selected';
      }
      if(objects == this.jobTypes){
        if(objects[index].label != '不限'){
          if(objects[index].children){
            this.jobTypeChildren.splice(0)
            objects[index].children.forEach(e=>{
              this.jobTypeChildren.push(e)
            })
          }else{
            this.jobTypeChildren.splice(0)
          }
        }else{
          this.jobTypeChildren.splice(0)
        }
      }
    }
  },
  mounted() {
    // let enterprise = getEnterprise() ;
    // GetEnterprise.r(enterprise.userId).then(d=>{
    //   this.enterprise.logo = d.data.data.logo ;
    //   this.enterprise.enterpriseName = d.data.data.enterpriseName ;
    // });
    ListDict.r("nat,wor,tre,wel,ind,sca,edu,peo,age,arr").then(d=>{
      this.dict = d.data.data;
    });
    let id = this.$route.path.split("/")[2];
    JobDetail.r(id).then(d=>{
      this.jobInfo = d.data.data ;
    })
  }
}
</script>

<style scoped>
.myCcontainer{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.el-main{
  padding: 0px 10px;
}
.el-collapse-item__header{
  font-size: 24px;
  font-weight: bold;
  font-size: x-large;
}
h2{
  margin: 0px 10px;
}
.qzclass{
  font-size: 18px;
  font-family: '微软雅黑'!important;
  margin: 0px 10px;
}
.numerClass{
  font-size: 18px;
  margin: 0px 40px;
  font-family: '微软雅黑'!important;
  color: coral;
}
.selected{
  background-color: #409eff;
  color: white;
  border: 1px solid #999;
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
.selected:hover{
  color: white;
}
.unSelected{
  font-size: 16px;
  padding: 5px 11px;
  font-family: '微软雅黑'!important;
}
</style>